.bluemap-container .ui .ui-element.toggle-button {

    &:not(.icon) {
        padding-right: 2.75rem;
    }

    &:active {
        background-color: $hover_bg;
        color: $hover_fg;

        > img {
            filter: invert(0);
        }
    }

    &.icon {
        &.selected {
            background-color: $active_bg;
            color: $active_fg;

            > img {
                filter: invert(1);
            }
        }
    }

    > .switch {
        position: absolute;
        right: 0.5rem;
        top: 50%;

        transform: translate(0, -50%);

        height: 1rem;
        width: 1.75rem;

        border-radius: 1rem;

        background-color: $normal_fg;

        transition: background-color 0.2s;

        &::after {
            position: absolute;
            content: '';

            top: 0;
            left: 0;

            height: 0.8rem;
            width: 0.8rem;

            margin: 0.1rem;

            border-radius: 100%;

            background-color: $normal_bg;

            transition: left 0.2s;
        }

    }

    &.selected > .switch {
        background-color: #008800;

        &::after {
            left: calc(100% - 1rem);
        }
    }

    &.icon > .switch {
        display: none;
    }

}